<template>
  <div v-loading="detailLoading" class="container">
    <el-card>
      <DetailHeader :header-info="detailBaseInfoData.basePlanOrderInfo" />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="回款计划" name="first">
          <DetailBaseInfo :detail-base-info-data="detailBaseInfoData" />
        </el-tab-pane>
        <el-tab-pane label="核账记录" name="second">
          <DetailAgreeInfo v-if="activeName==='second'" :base-plan-order-info="detailBaseInfoData.basePlanOrderInfo" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import DetailBaseInfo from './components/DetailBaseInfo'
import DetailAgreeInfo from './components/DetailAgreeInfo'
import DetailHeader from './components/DetailHeader'
import { viewQuery } from '@/service/remittance'

export default {
  name: 'RemittanceDetail',
  components: { DetailBaseInfo, DetailAgreeInfo, DetailHeader },
  data() {
    return {
      detailLoading: true,
      activeName: 'first',
      detailBaseInfoData: {
        basePlanOrderInfo: {},
        payeeInfo: {}
      }

    }
  },
  computed: {},
  mounted() {
    this.viewQueryhandle()
  },
  methods: {
    async viewQueryhandle() {
      const { id } = this.$route.query
      const res = await viewQuery({ id }).finally(() => {
        this.detailLoading = false
      })
      const { basePlanOrderInfo = {}, payeeInfo = [] } = res
      this.detailBaseInfoData = {
        basePlanOrderInfo,
        payeeInfo
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    margin: 12px;
    width: calc(100% - 24px);
  }
</style>
